<template>
  <div class="container">
    <div class="header">
      <el-select
        :disabled="disabled"
        clearable
        v-model="inside.value"
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        placeholder="请选择供应商"
        :remote-method="insideRemoteMethod"
        :loading="inside.loading"
      >
        <el-option
          v-for="item in inside.list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-button
        type="primary"
        :disabled="disabled"
        icon="el-icon-search"
        @click="handleSearch()"
        >查询</el-button
      >
      <el-button
        type="danger"
        class="handleSearch"
        icon="el-icon-delete"
        @click="empty()"
        >清空数据</el-button
      >

      <el-button
        type="success"
        style="position: absolute;top: 0;right: 0;"
        icon="el-icon-circle-plus"
        @click="btn()"
        >保存</el-button
      >
    </div>
    <div
      style="font-size: 12px;color: #F56C6C;padding-top:5px;padding-bottom: 5px;"
    >
      再次选择供应商请点击清空勾选数据按钮
    </div>
    <div class="main">
      <div class="center">
        <el-select
          v-model="options"
          style="margin-bottom: 10px;width: 300px;"
          placeholder="请选择发票"
          @change="chOptions(options)"
        >
          <el-option
            v-for="item in optionsData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-table
          max-height="600"
          :data="tableoptionsData"
          border
          stripe
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          class="section-table"
          @selection-change="handleSelectionChange"
        >
          empty-text="暂无数据" >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="xmmc"
            label="商品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="xmdj"
            label="商品单价"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="xmje"
            label="商品金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="can_amount"
            label="可匹配金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sl"
            label="数量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="se"
            label="税额"
            align="center"
          ></el-table-column>
          <!-- <el-table-column
            prop="xmjshj"
            label="加税合计"
            align="center"
          ></el-table-column> -->
          <el-table-column
            prop="ggxh"
            label="规格"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dw"
            label="单位"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div style="width: 1500px;overflow-x: auto;margin-left: 10px;">
        <el-input
          placeholder="请输入商品名称、编码"
          style="width: 200px;margin-bottom: 10px;"
          v-model="keyword"
          clearable
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleGoods()"
          >查询</el-button
        >
        <el-table
          tooltip-effect="dark"
          max-height="600"
          ref="multipleTables"
          :data="tableData"
          border
          @selection-change="handleSelectionChild"
          style="max-width: 1500px;flex:1"
          empty-text="暂无数据"
        >
          <el-table-column
            :selectable="selectableBool"
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goods_name"
            label="商品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goods_code"
            label="商品编码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goods_num"
            label="商品数量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goods_price"
            label="商品价格"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="spec"
            label="规格"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="amount"
            label="总金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="start_date"
            label="开始时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="end_date"
            label="结束时间"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <pagination
      class="paginations"
      style="width: 100%;"
      @page="handleSizeChange"
      @pagesize="handleCurrentChange"
      :pageData="pageData"
    ></pagination>
  </div>
</template>
<script>
import Pagination from "@/components/pagination";
import { draw, getSupplierOptions, getOptions, saveChoose } from "@/api/bill";
export default {
  components: {
    pagination: Pagination
  },
  data() {
    return {
      //页面数据
      tableData: [],
      optionsData: [],
      optionsDetails: [],
      tableoptionsData: [],
      options: "",
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      keyword: "",
      disabled: false,
      multipleSelection: [],
      //dialog信息
      dialog: {
        dialogVisible: false,
        id: ""
      },
      selectionId: "",
      selectListData: [],
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: 1,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      pageBool: false,
      centerData: {}
    };
  },
  created() {
    //页面数据
    this.getSupplierList();
  },
  methods: {
    //页面数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        supplier_code: this.inside.value,
        keyword: this.keyword
      };
      this.tableData = [];
      draw(data)
        .then(res => {
          this.tableData = res.data.details.data;
          this.pageData.total = res.data.details.total;
          console.log(this.selectionId, 89898989);
          if (this.selectionId) {
            console.log(this.centerData, 6767);
            this.tableData.forEach((res, index) => {
              this.centerData[this.options][this.selectionId].forEach(row => {
                if (res.detail_id == row) {
                  this.$nextTick(() => {
                    this.$refs.multipleTables.toggleRowSelection(
                      this.tableData[index],
                      true
                    );
                  });
                }
              });
            });

            console.log(
              this.centerData[this.options][this.selectionId],
              888888
            );
          }
        })
        .then(() => {});
    },
    selectableBool() {
      if (this.selectionId) {
        return true;
      } else {
        return false;
      }
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },

    getOptionsData() {
      let data = {
        supplier_code: this.inside.value
      };
      getOptions(data).then(res => {
        this.optionsDetails = res.data.details;
        this.optionsData = [];
        this.centerData = res.data.relations;
        res.data.files.forEach(prop => {
          this.optionsData.push({
            value: prop.id,
            label: `${prop.file_name}(${prop.fphm})`
          });
        });
      });
    },
    //获取供应商数据
    getSupplierList(query = "") {
      let data = {
        supplier_code: query,
        page: 1,
        limit: 50
      };
      this.inside.loading = true;
      getSupplierOptions(data).then(res => {
        this.inside.list = res.data.options.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}(${item.code})` };
        });
        this.inside.loading = false;
      });
    },
    empty() {
      this.optionsData = [];
      this.tableoptionsData = [];
      this.tableData = [];
      this.options = "";
      this.disabled = false;
      this.inside.value = "";
      this.pageData.total = 1;
      this.pageData.page = 1;
      this.centerData = {};
      this.getSupplierList();
    },
    // 搜索
    handleSearch() {
      if (this.inside.value) {
        this.getData();
        this.getOptionsData();
      } else {
        this.$message({
          type: "info",
          message: "请选择供应商"
        });
      }
    },
    //保存
    btn() {
      if (Object.keys(this.centerData).length != 0) {
        this.$confirm("是否保存?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            console.log(this.centerData, 11111);
            let data = {
              supplier_code: this.inside.value,
              relations: JSON.stringify(this.centerData)
            };

            this.inside.loading = true;
            saveChoose(data).then(res => {
              if (res.code == 0) {
                // this.empty();
                this.$message({
                  type: "success",
                  message: res.msg
                });
              } else {
                console.log(1111111);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请勾选数据"
        });
      }
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.pageBool = true;
      this.getData();
    },
    //查询商品
    handleGoods() {
      if (this.inside.value) {
        this.pageData.page = 1;
        this.getData();
      } else {
        this.$message({
          type: "info",
          message: "请选择供应商"
        });
      }
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.pageBool = true;
      this.getData();
    },
    chOptions(id) {
      this.tableoptionsData = this.optionsDetails[id];
      if (!this.isEmpty(this.centerData[id])) {
        this.centerData[id] = {};
      }
      console.log(this.centerData, 123);
      this.disabled = true;
      this.pageData.total = 1;
      this.pageData.page = 1;
      this.getData();
    },
    isEmpty(obj) {
      return typeof obj !== "undefined" && typeof obj !== null;
    },
    handleSelectionChange(val) {
      this.selectionId = "";
      this.pageBool = false;
      this.$refs.multipleTables.clearSelection();
      this.selectionId = val.length > 0 ? val[0].id : "";
      this.selectableBool();
      // 单选
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      }
      if (this.selectionId) {
        if (!this.isEmpty(this.centerData[this.options][this.selectionId])) {
          this.centerData[this.options][this.selectionId] = [];
          console.log(this.centerData, 1111);
        } else {
          if (this.centerData[this.options][this.selectionId].length > 0) {
            console.log(this.selectionId, this.centerData, 2222);
            this.tableData.forEach((res, index) => {
              this.centerData[this.options][this.selectionId].forEach(row => {
                if (res.detail_id == row) {
                  this.$nextTick(() => {
                    this.$refs.multipleTables.toggleRowSelection(
                      this.tableData[index],
                      true
                    );
                  });
                }
              });
            });
          }
        }
      }
      console.log(this.centerData, 9999);
    },
    handleSelectionChild(val) {
      console.log(val, 67676767);
      let arrId = [];
      val.forEach(res => {
        arrId.push(res.detail_id);
      });
      if (this.selectionId && !this.pageBool) {
        if (this.centerData[this.options][this.selectionId].length == 0) {
          this.centerData[this.options][this.selectionId] = arrId;
        } else {
          this.tableData.forEach((res, index) => {
            this.centerData[this.options][this.selectionId].forEach(
              (row, index) => {
                if (res.detail_id == row) {
                  this.centerData[this.options][this.selectionId].splice(
                    index,
                    1
                  );
                }
              }
            );
          });
          this.centerData[this.options][this.selectionId] = [
            ...this.centerData[this.options][this.selectionId],
            ...arrId
          ];
          console.log(this.centerData, 333);
        }
      }
      this.pageBool = false;
      console.log(this.centerData, 4444);
    }
  }
};
</script>
<style scoped>
.main {
  display: flex;
}
.header {
  position: relative;
}
.search {
  width: 200px;
  margin-right: 10px;
}
</style>
